<template>
  <div class="order_pay">
    <el-form :inline="true" :model="searchForm" size="mini" style="margin-left: 10px">
      <el-form-item label="客户">
        <el-input v-model="searchForm.customerPhone" placeholder="请输入客户电话"></el-input>
      </el-form-item>
      <el-form-item label="订单创建日期">
        <el-date-picker
          v-model="searchForm.createTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status">
          <el-option :key="STATUS.NOT_PAY" :value="STATUS.NOT_PAY" label="未支付"></el-option>
          <el-option :key="STATUS.PAYED" :value="STATUS.PAYED" label="已支付"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="fa fa-file-excel-o"
          @click="exportExcel()"
        >&nbsp;导出到EXCEL</el-button>
      </el-form-item>
    </el-form>
    <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
      <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
      <el-table-column width="100" label="报价状态">
        <template slot-scope="scope">{{scope.row.quotationStatus===STATUS.NOT_PAY?'未支付':'已支付'}}</template>
      </el-table-column>
      <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
      <el-table-column prop="customerTel" width="300" label="客户电话"></el-table-column>
      <el-table-column prop="orderDate" label="创建时间"></el-table-column>
      <el-table-column label="企业信息">
        <template slot-scope="scope">{{scope.row.company||'暂无'}}</template>
      </el-table-column>
      <el-table-column label="报价">
        <template slot-scope="scope">
          <span>{{scope.row.priceQuotation?scope.row.priceQuotation+'元':'暂无'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="t-link" @click="toPaymentForm(scope.row)">修改为已支付</span>
          <span class="t-link" @click="toCompanyForm(scope.row)">添加企业信息</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 支付备注弹出层 -->
    <el-dialog :visible.sync="paymentStatusDialogVisible" title="支付信息">
      <el-form label-width="100px" :model="paymentForm" ref="updatePaymentForm">
        <el-form-item label="备注" prop="paymentRemark" :rules="[{required:true,message:'备注不能为空'}]">
          <el-input type="textarea" v-model="paymentForm.paymentRemark"></el-input>
        </el-form-item>
        <el-form-item
          label="支付金额"
          prop="paymentPrice"
          :rules="[{required:true,message:'支付金额不能为空'}]"
        >
          <el-input type="number" v-model="paymentForm.paymentPrice"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentStatusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrderPayStatus()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="companyDialogVisible" title="企业信息">
      <el-form label-width="100px" :model="companyForm" ref="companyForm" style="width:100%">
        <el-form-item label="企业信息">
          <el-autocomplete
            class="inline-input"
            v-model="companyForm.company"
            :fetch-suggestions="getCompanySuggestions"
            placeholder="请输入企业税号查询"
            :trigger-on-focus="false"
            @select="handleSelectCompany"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="companyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCompany()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import orderMixin from "./order_mixin";
import ajax from "@/api/ajax";
const STATUS = {
  PAYED: "PAYED",
  NOT_PAY: "NOT_PAY"
};
export default {
  name: "order_pay",
  mixins: [orderMixin],
  data() {
    return {
      STATUS,
      searchForm: {
        customerPhone: "",
        createTime: [],
        status: STATUS.NOT_PAY
      },
      paymentForm: {
        paymentRemark: "",
        paymentPrice: 0
      },
      companyForm: {
        taxCode: ""
      },
      paymentStatusDialogVisible: false,
      companyDialogVisible: false
    };
  },
  methods: {
    getCompanySuggestions(queryString, cb) {
      ajax.get(`/api/enterprise/info/${queryString}`).then(resp => {
        let data = resp.data.data;
        if (data && data.length) {
          data = data.map(({ taxCode, name }) => {
            return { value: `${name}(${taxCode})`, taxCode };
          });
          cb(data);
        }
      });
    },
    handleSelectCompany(selected) {
      this.companyForm.taxCode = selected.taxCode;
    },
    toPaymentForm(selectedOrder) {
      this.paymentSelectedOrder = selectedOrder;
      this.paymentStatusDialogVisible = true;
    },
    toCompanyForm(selectedOrder) {
      this.paymentSelectedOrder = selectedOrder;
      this.companyDialogVisible = true;
    },
    updateCompany() {
      if (!this.companyForm.taxCode) {
        alert("清先输入企业信息！");
      } else {
        ajax
          .put("/api/sys/orders", {
            orderId: this.paymentSelectedOrder.orderId,
            taxId: this.companyForm.taxCode
          })
          .then(resp => {
            let result = resp.data;
            this.handleOpSuccess(result);
            this.search();
            this.companyDialogVisible = false;
            this.companyForm.taxCode = "";
            this.companyForm.company = "";
          });
      }
    },
    updateOrderPayStatus() {
      this.$refs["updatePaymentForm"].validate(valid => {
        if (valid) {
          let url = `/api/admin/order/pay/${this.paymentSelectedOrder.orderId}`;
          ajax
            .put(url, {
              remark: this.paymentForm.paymentRemark,
              fee: this.paymentForm.paymentPrice
            })
            .then(resp => {
              let result = resp.data;
              this.handleOpSuccess(result);
              this.search();
              this.paymentStatusDialogVisible = false;
            });
        }
      });
    },
    search() {
      let params = Object.assign({}, this.pagination, this.searchForm);
      this.searchOrder(params).then(result => {
        console.log(result);
      });
    }
  },
  created() {
    this.search();
  }
};
</script>
<style>
.el-autocomplete.inline-input {
  width: 300px;
}
</style>
